import { FormSchema } from "@/components/Form";
import { BasicColumn } from "@/components/Table";
import { tableDateFormat } from "@/utils/dateUtils";
import { ElOption } from "element-plus";
import { h } from "vue";
import { Recordable } from "/#/global";

// createBy: "admin"
// createTime: "2021-02-03 11:04:37"
// dataScope: "全部"
// description: "-"
// disabled: false
// id: 1
// label: "ROLE_超级管理员"
// level: 0
// menus: [{id: 1, subCount: 3, type: 0, title: "系统管理",…}]
// name: "ROLE_超级管理员"
// updateBy: "admin"
// value: 1

export const columns: BasicColumn<Recordable>[] = [
  {
    id: "name",
    label: "角色名",
    prop: "name",
    minWidth: 80,
  },
  {
    id: "dataScope",
    label: "角色级别",
    prop: "dataScope",
    minWidth: 80,
  },
  {
    id: "enabled",
    label: "状态",
    prop: "enabled",
    minWidth: 80,
    slots: { customRender: "enabled" },
  },
  {
    id: "description",
    label: "说明",
    prop: "description",
    minWidth: 80,
  },
  {
    id: "level",
    label: "级别",
    prop: "level",
    minWidth: 80,
  },
  {
    id: "createBy",
    label: "创建人",
    prop: "createBy",
    minWidth: 80,
  },
  {
    id: "createTime",
    label: "创建时间",
    prop: "createTime",
    minWidth: 120,
    formatter: tableDateFormat,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: "account",
    label: "用户名",
    component: "ElInput",
    colProps: { span: 8 },
  },
  {
    field: "nickname",
    label: "昵称",
    component: "ElInput",
    colProps: { span: 8 },
  },
];

export const userFormSchema: FormSchema[] = [
  {
    field: "username",
    label: "用户名",
    component: "ElInput",
    helpMessage: ["不能输入带有admin的用户名"],
    rules: [
      {
        required: true,
        message: "请输入用户名",
      },
    ],
  },
  {
    field: "nickName",
    label: "昵称",
    component: "ElInput",
  },
  {
    field: "gender",
    label: "性别",
    component: "ElSelect",
    renderComponentContent: (values: any) => {
      const options = [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ];

      return h(
        "div",
        {},
        options.map((item, inde) => {
          return h(ElOption, {
            key: item.value,
            value: item.value,
            label: item.label,
            disabled: false,
          });
        })
      );
    },
    rules: [
      {
        required: true,
        message: "请选择性别",
      },
    ],
  },
  {
    field: "birthday",
    label: "生日",
    component: "ElDatePicker",
    componentProps: {
      type: "datetime",
      valueFormat: "YYYY-MM-DD hh:mm:ss",
      placeholder: "选择一个时间",
    },
    changeEvent: "update:modelValue",
  },
  {
    field: "email",
    label: "电子邮箱",
    component: "ElInput",
  },
  {
    field: "phone",
    label: "联系电话",
    component: "ElInput",
  },
  {
    field: "organizations",
    fieldKey: "id",
    label: "所属组织",
    component: "ElTreeSelect",
    componentProps: {
      data: [],
      multiple: true,
    },
  },
  {
    field: "positions",
    fieldKey: "id",
    label: "职位",
    component: "ElSelectV2",
    componentProps: {
      options: [],
      multiple: true,
    },
  },
  {
    field: "roles",
    fieldKey: "id",
    label: "角色",
    component: "ElSelectV2",
    componentProps: {
      options: [],
      multiple: true,
    },
    rules: [
      {
        required: true,
        message: "请选择角色",
      },
    ],
  },
  {
    field: "enabled",
    label: "状态",
    component: "ElSelectV2",
    componentProps: {
      options: [],
    },
       rules: [
      {
        required: true,
        message: "请选择账户状态",
      },
    ],
  },
];
